<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目页面导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .search-box {
            padding: 20px 40px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 20px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #4f46e5;
        }
        
        .pages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 20px;
            padding: 40px;
        }
        
        .page-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            height: 350px;
        }
        
        .page-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            border-color: #4f46e5;
        }
        
        .page-preview {
            width: 100%;
            height: 250px;
            border: none;
            background: #f8fafc;
            transition: opacity 0.3s ease;
        }
        
        .page-info {
            padding: 20px;
            border-top: 1px solid #e5e7eb;
        }
        
        .page-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .page-path {
            font-size: 0.85rem;
            color: #6b7280;
            font-family: 'Courier New', monospace;
            background: #f3f4f6;
            padding: 3px 6px;
            border-radius: 4px;
            display: inline-block;
        }
        
        .open-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(79, 70, 229, 0.9);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 12px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10;
        }
        
        .page-card:hover .open-button {
            opacity: 1;
        }
        
        .open-button:hover {
            background: rgba(79, 70, 229, 1);
        }
        
        .stats {
            background: #f8fafc;
            padding: 20px 40px;
            border-top: 1px solid #e5e7eb;
            text-align: center;
            color: #6b7280;
        }
        
        .no-results {
            text-align: center;
            padding: 60px 40px;
            color: #6b7280;
        }
        
        .no-results h3 {
            margin-bottom: 10px;
            color: #374151;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="header">
            <h1>🚀 项目页面导航</h1>
            <p>基于 Vite 配置的页面预览，点击卡片在新窗口打开</p>
        </div>
        
        <div class="search-box">
            <div style="display: flex; gap: 10px; align-items: center;">
                <input 
                    type="text" 
                    class="search-input" 
                    placeholder="🔍 搜索页面..."
                    id="searchInput"
                    style="flex: 1;"
                >
                <button 
                    onclick="reloadPages()" 
                    style="padding: 12px 20px; background: #4f46e5; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background 0.3s ease;"
                    onmouseover="this.style.background='#3730a3'"
                    onmouseout="this.style.background='#4f46e5'"
                >
                    🔄 刷新
                </button>
            </div>
        </div>
        
        <div id="pagesContainer" class="pages-grid">
            <!-- 页面列表将通过 JavaScript 动态生成 -->
        </div>
        
        <div class="no-results" id="noResults" style="display: none;">
            <h3>未找到匹配的页面</h3>
            <p>请尝试其他搜索关键词</p>
        </div>
        
        <div class="stats" id="stats">
            <!-- 统计信息将通过 JavaScript 生成 -->
        </div>
    </div>

    <script>
        // 直接从 vite.config.ts 中提取的页面配置
        const vitePages = {
            'index': { path: 'public/index.html', title: '🏠 首页' },
            'ojSaas': { path: 'public/ojSaas.html', title: '⚖️ OJ SaaS 平台' },
            'saasMgmt': { path: 'public/saasMgmt.html', title: '🛠️ SaaS 管理' },
            'science': { path: 'public/BeijingScienceConter.html', title: '🔬 北京科学中心' },
            'sciencechat': { path: 'public/sciencechat.html', title: '💬 科学聊天' },
            'scienceyun': { path: 'public/scienceyun.html', title: '☁️ 科学云' },
            'bjsc': { path: 'public/bjsc.html', title: '🏛️ 北京科学中心' },
            'monitor': { path: 'public/monitor.html', title: '📊 监控台' },
            'admin': { path: 'public/admin.html', title: '👨‍💼 管理后台' },
            'logs': { path: 'public/logs.html', title: '📋 日志查看' },
            'h51': { path: 'public/h51.html', title: '📱 H5 页面 1' },
            'question': { path: 'public/question.html', title: '❓ 题目管理' },
            'huilongguan': { path: 'public/huilongguan.html', title: '🏘️ 回龙观' },
            'huilongguanoj': { path: 'public/huilongguan-oj.html', title: '⚖️ 回龙观 OJ' },
            'kangbang': { path: 'public/kangbang.html', title: '🏢 康邦' },
            'tuyaiot': { path: 'public/tuyaiot.html', title: '🔌 涂鸦 IoT' },
            'tuyaiotv2': { path: 'public/tuyaiotv2.html', title: '🔌 涂鸦 IoT V2' },
            'yinchuan': { path: 'public/yinchuan.html', title: '🏙️ 银川' },
            'changping1': { path: 'public/changping1.html', title: '🏞️ 昌平区' },
            'h5index': { path: 'public/h5index.html', title: '📱 H5 首页' },
            'stc': { path: 'public/stc.html', title: '🚀 STC' },
            'stclogin': { path: 'public/stclogin.html', title: '🔐 STC 登录' },
            'manage': { path: 'public/manage.html', title: '⚙️ 管理' },
            'qianxuesenzhongxue': { path: 'public/qianxuesenzhongxue.html', title: '🎓 钱学森中学' },
            'hdbm': { path: 'public/hdbm.html', title: '💼 HDBM' },
            'acCoder': { path: 'public/acCoder.html', title: '💻 码客行 - 管理' },
            'acCoderOj': { path: 'public/acCoderOj.html', title: '⚖️ 码客行 - OJ' },
            'acCoderSaas': { path: 'public/acCoderSaas.html', title: '🔧 码客行 - SaaS' },
            'acCoderSaasMgmt': { path: 'public/acCoderSaasMgmt.html', title: '🛠️ 码客行 - SaaS 管理' },
            'acCoderH5': { path: 'public/acCoderH5.html', title: '📱 码客行 - H5' },
            'mathH5': { path: 'public/mathH5.html', title: '🧮 数学 H5' },
            'newh5': { path: 'public/newh5.html', title: '🧮 新 H5' },
            'teamchart': { path: 'public/teamchart.html', title: '📊 团队图表' },
        };

        // 转换为数组格式
        const pages = Object.entries(vitePages).map(function([name, config]) {
            return {
                name: name,
                path: config.path.replace('public/', ''),
                fullPath: '/' + config.path.replace('public/', ''),
                title: config.title,
                fileName: config.path.split('/').pop()
            };
        }).sort(function(a, b) {
            return a.title.localeCompare(b.title);
        });

        let filteredPages = pages.slice();

        // 打开新窗口的函数
        function openPage(url) {
            window.open(url, '_blank', 'noopener,noreferrer');
        }

        function renderPages(pagesToRender) {
            const container = document.getElementById('pagesContainer');
            const noResults = document.getElementById('noResults');
            
            if (pagesToRender.length === 0) {
                container.style.display = 'none';
                noResults.style.display = 'block';
            } else {
                container.style.display = 'grid';
                noResults.style.display = 'none';
                
                container.innerHTML = pagesToRender.map(function(page) {
                    return '<div class="page-card" onclick="openPage(\'' + page.fullPath + '\')">' +
                        '<button class="open-button" onclick="event.stopPropagation(); openPage(\'' + page.fullPath + '\')">' +
                            '🔗 打开' +
                        '</button>' +
                        '<iframe ' +
                            'class="page-preview" ' +
                            'src="' + page.fullPath + '"' +
                            'loading="lazy"' +
                            'sandbox="allow-same-origin allow-scripts"' +
                            'title="' + page.title + '"' +
                        '></iframe>' +
                        '<div class="page-info">' +
                            '<div class="page-title">' + page.title + '</div>' +
                            '<div class="page-path">' + page.path + '</div>' +
                        '</div>' +
                    '</div>';
                }).join('');
            }
            
            updateStats(pagesToRender.length);
        }

        function updateStats(count) {
            const stats = document.getElementById('stats');
            stats.innerHTML = '共显示 <strong>' + count + '</strong> 个页面，总共 <strong>' + pages.length + '</strong> 个页面可用';
        }

        function filterPages(searchTerm) {
            const term = searchTerm.toLowerCase();
            filteredPages = pages.filter(function(page) {
                return page.title.toLowerCase().includes(term) ||
                    page.name.toLowerCase().includes(term) ||
                    page.path.toLowerCase().includes(term) ||
                    page.fileName.toLowerCase().includes(term);
            });
            renderPages(filteredPages);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 搜索功能
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', function(e) {
                filterPages(e.target.value);
            });

            // 初始渲染
            renderPages(pages);

            // 添加键盘快捷键
            document.addEventListener('keydown', function(e) {
                if (e.ctrlKey && e.key === 'f') {
                    e.preventDefault();
                    searchInput.focus();
                }
            });

            console.log('🚀 页面导航已加载，共有', pages.length, '个页面');
            console.log('📋 页面列表:', pages.map(function(p) {
                return p.title + ' (' + p.fileName + ')';
            }));
        });

        // 重新加载页面的函数
        window.reloadPages = function() {
            const searchInput = document.getElementById('searchInput');
            filterPages(searchInput.value);
        };
    </script>
</body>
</html>